<style lang="less" scoped>
.cli-content-outline {
  padding: 0 5px;
  margin-top: 16px;
  overflow: auto;
  // height:calc(~"100vh - 200px");
  /*margin-left: -24px;*/
  /*margin-right: -24px;*/
}
.cli-content-column-left {
  min-height:200px;
  padding: 0 6px 0 0;
}
.cli-content-column-middle {
  min-height:200px;
  padding: 0 6px 0 12px;
}
.cli-content-column-right {
  min-height:200px;
  padding: 0 0 0 6px;
}
</style>
<template>
  <Row class="cli-content-outline">
    <Col class="cli-content-column-left" :span="left"><slot name="left"></slot></Col>
    <Col class="cli-content-column-middle" :span="middle"><slot name="middle"></slot></Col>
    <Col class="cli-content-column-right" :span="right"><slot name="right"></slot></Col>
  </Row>
</template>

<script>
export default {
  name: "view-content-three",
  data(){
    return {

    }
  },
  props:{
    title:String,
    left:Number,
    middle:Number,
    right:Number,
  }
}
</script>